/*
import { setTimeout } from 'timers';
 * 推荐产品列表的单个产品组件
 * @Author: ljb
 * @Date: 2018-09-04 11:20:23
 * @Last Modified by: ljb
 * @Last Modified time: 2019-01-08 17:12:25
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    @import '~src/assets/css/common.less';

    .v-component-product-item {
        position: relative;
        width: 100%;
        padding-top: 18*@rem-per-px;
        padding-bottom: 18*@rem-per-px;
        padding-left: 30*@rem-per-px;
        box-sizing: border-box;
        background: #ffffff;
        /*产品容器的样式*/
        .product-container {
            // display: table;
            width: 100%;
            // padding-bottom: 24*@rem-per-px;
            & > div {
                // display: table-cell;
                /*产品图片的样式*/
                &.product-image {
                    display: inline-block;
                    width: 122*@rem-per-px;
                    height: 122*@rem-per-px;
                    overflow: hidden;
                    background: @main-background;
                    border-radius: 20*@rem-per-px;
                    // border: @input-border;
                    font-size: 0;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                /*产品图片的样式 END*/
                /*产品信息的样式*/
                &.product-info {
                    display: inline-block;
                    // padding-top: 3*@rem-per-px;
                    padding-left: 20*@rem-per-px;
                    font-size: 18*@rem-per-px;
                    vertical-align: top;
                    margin-top: 6*@rem-per-px;
                    /*主标题*/
                    .product-title {
                        // white-space: nowrap;
                        width: 6rem;
                        // margin-bottom: 10*@rem-per-px;
                        color: #666666;
                        line-height: 26*@rem-per-px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 18 *@rem-per-px;
                    }
                    /*主标题 END*/

                    /*产品简述*/
                    // .product-desc {
                    //     white-space: nowrap;
                    //     color: #666666;
                    //     margin-top: 7*@rem-per-px;
                    //     line-height:28*@rem-per-px;
                    // }
                    /*产品简述 END*/

                    // .product-brand{
                    //     white-space: nowrap;
                    //     color: #666666;
                    //     line-height:28*@rem-per-px;
                    //     font-size: 18 *@rem-per-px;
                    // }

                    .product-price{
                        white-space: nowrap;
                        color: #666666;
                        line-height:26*@rem-per-px;
                        font-size: 18 *@rem-per-px;
                    }

                    /*产品标签样式*/
                    .product-tag-container {
                        max-width: 440*@rem-per-px;
                        margin-top: 20*@rem-per-px;
                        width: 6rem;
                        overflow-x: auto;
                        .product-tag-container__list{
                            white-space: nowrap;
                            .product-tag-container__list__item {
                                display: inline-block;
                                box-sizing: border-box;
                                height: 40*@rem-per-px;
                                line-height: 40*@rem-per-px;
                                border-radius: 40*@rem-per-px;
                                padding: 0 27*@rem-per-px;
                                text-align: center;
                                background: #FFF2F7;
                                color:#555555;
                                &:not(:first-of-type) {
                                    margin-left: 20*@rem-per-px;
                                }
                            }
                        }
                    }
                    /*产品标签样式 END*/
                }
                /*产品信息的样式 END*/
            }


        }
        /*产品容器的样式 END*/
        .cart-icon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            width: 60*@rem-per-px;
            height: 40*@rem-per-px;
            line-height: 40*@rem-per-px;
            margin: auto 0;
            border-top-left-radius: 20*@rem-per-px;
            border-bottom-left-radius: 20*@rem-per-px;
            // background-color: red;
            background:linear-gradient(280deg, #fff2c7 -10%, #ffaecc 40%);
            text-align: center;
            font-size: 0;
            img {
                height: 100%;
            }
        }

        &::after{
            content: '';
            display: block;
            position: absolute;
            height: 1px;
            left: 30 *@rem-per-px;
            right:  0;
            bottom: 0;
            background: #f5f5f5;
            transform: scaleY(.5);
        }
    }

</style>
<template>
	<li class="v-component-product-item">
		<!-- 产品信息容器 -->
		<div class="product-container">
			<div class="product-image">
				<img
					:src="product.thumb_url"
					alt="">
			</div>

			<div class="product-info">
				<h3 class="product-title">{{ product.title }}</h3>
				<p class="product-price">{{ $t('common.cash') }}{{ product.sell_price }}</p>
				<!-- <p class="product-desc">{{ product.description }}</p> -->
				<div class="product-tag-container personal-scrollbar">
					<ul class="product-tag-container__list">
						<li
							v-for="(item, index) in product.tag_names"
							:key="index"
							class="product-tag-container__list__item">
							{{ item }}
						</li>
					</ul>
				</div>
			</div>

		</div>
		<!-- 购物车图标 -->
		<div
			v-if="hasUrl"
			class="cart-icon"
			@click="viewProduct(product.link_product.url)">
			<img
				src="//gz.bcebos.com/v1/beauty-mirror/wx_system/2.3.9/tuijian_shopping_img@2x.png"
				alt="">
		</div>
	</li>
</template>
<script>
export default {
	name: 'ProductItem',
	props: {
		product: {
			type: Object,
			required: true,
		},
	},
	data() {
		return {
			cart_icon: require('src/assets/media/img/icons/tuijian_shopping_img@2x.png'),
		};
	},
	computed: {
		hasUrl() {
			return this.product && this.product.link_product && this.product.link_product.url;
		},
	},
	mounted() {

	},
	methods: {
		viewProduct(url) {
			window.open(url);
		},
	},
};
</script>
